<template>
  <div class="login">
    <ehl-form
      ref="form"
      :options="login.options"
      :data="login.data"
      custom-class="cpt_round_card login_box"
    >
    </ehl-form>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Component } from 'vue-property-decorator'
  import ehlForm from '@/common'
  import loginConfig from '@/views/login.js'
  @Component({
    name: 'loginView',
    components: { ehlForm },
    beforeRouteEnter(to, from, next) {
      $setStore('waiting', false)
      next()
    },
  })
  export default class loginView extends Vue {
    login = new loginConfig({ name: '', password: '' })
    formConfig = null
    mounted() {
      this.$refs.form.addParam({ vue: this })
      this.formConfig = this.$refs.form.getOptions()
      this.testLogin()
    }
    async testLogin() {
      try {
        let res = await ajax.get('/v2/api/detection/user/info')
        $setStore('user', res.data)
        $rReplace({ name: 'main' })
      } catch (error) {
        console.log(error)
      }
    }
    async loginClick() {
      try {
        await this.$refs.form.validate()
        let res = await ajax.post('/v2/api/detection/login', {
          userName: this.login.data.name,
          password: this.$md5(this.login.data.password),
        })
        $setStore('user', res.data)
        $rReplace({ name: 'main' })
      } catch (error) {
        if (error === false) {
          console.log(error)
        } else {
          $message.error(error)
        }
      }
    }
    changePassword() {
      $rPush({ name: 'password' })
    }
  }
</script>
<style lang="less" scoped>
  .login {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background-image: url(~@/assets/loginbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .login_box {
      width: 400px;
      padding: 30px 30px;
      margin-right: 200px;

      .password {
        font-size: 14px;
        color: @cpt_main;
        text-align: right;
        cursor: pointer;
      }
    }
  }
</style>
